<template>
  <div id="login">
    <div class="tourse">
      <a-button type="link" @click="codeLogin">验证码登录</a-button>
      <a-button type="link" @click="goRegister">去注册</a-button>
      <a-button type="link" @click="goRetPwd">找回密码</a-button>
      <Tourse></Tourse>
    </div>
    <div class="login_box">
      <div class="left_login_img">
        <img src="/assets/image/login.png" alt="" />
      </div>
      <div class="right_login_form_box">
        <div class="form_title">
          <div>拼多多商品信息采集与分析</div>
        </div>
        <div class="login_form">
          <a-form
            ref="formRef"
            :model="formState"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
            @finish="loginButtonClicked"
            :rules="rules"
          >
            <a-form-item name="account">
              <a-input
                class="large_height"
                v-model:value="formState.account"
                placeholder="请输入账号"
                style="width: 360px"
                autocomplete="account"
              >
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="password">
              <a-input-password
                class="large_height"
                v-model:value="formState.password"
                placeholder="请输入密码"
                style="width: 360px"
                autocomplete="current-password"
              >
                <template #prefix>
                  <LockOutlined class="site-form-item-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
              <a-button type="primary" html-type="submit" class="large_height" style="width: 360px">登录</a-button>
            </a-form-item>
          </a-form>


          <div class="additional_info">
            <!-- <button @click="showFreeAccountInfo">免费账号</button>
            <button @click="forgetPwd">忘记密码</button> -->
          </div>
          <div id="message">{{ errorMessage }}</div>
        </div>
      </div>
    </div>
    <div class="company_inf">Copyright ©2024 陈维龙毕业设计</div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
import { login, getUserInfo } from '@/api/user';
import store from '@/stores';
const visible = ref<Boolean>(false);
interface FormState {
  account: string;
  password: string;
}
const formRef = ref();
const router = useRouter();
const formState = reactive<FormState>({
  account: '',
  password: '',
});
const rules = reactive({
  account: [{ required: true, message: '请输入账号' }],
  password: [{ required: true, message: '请输入密码' }],
});

const userLogin = async (account: string, password: string): Promise<void> => {
    let res = await login(account, password);
    console.log(res)
    if (res.code === 10000) {
      localStorage.setItem('access_token', res.data.token);
      return res.data
    } else{
      showError(res.message);
      throw new Error(res.message)
    }
};

const setUserInfoStore = async () => {
  console.log('setUser');

  // let res = await getUserInfo();
  // store.dispatch('setUserInf', res);
};

const loginButtonClicked = async (values: any) => {
  const isValid = await formRef.value?.validate();
  console.log(isValid)
  if(isValid){
  await userLogin(values.account, values.password);
  await setUserInfoStore();
  router.push({ path: '/home' });
  }else{
    router.push({ path: '/login' })
  }
};

const codeLogin = () =>{
  router.push({path: '/codelogin'})
}

const goRegister = () =>{
  router.push({path: '/register'})
}

const goRetPwd = () =>{
  router.push({path: '/retpwd'})
}

function showError(errorMessage: string) {
  const messageElement = document.getElementById('message');
  if (messageElement) {
    messageElement.innerText = errorMessage;
    messageElement.style.color = 'red'; // 设置错误信息颜色为红色
    messageElement.style.display = 'block';
  }
}

</script>
<style lang="scss" scoped>
@import './login.scss';

.fold_info {
  // display: flex;
  // justify-content: space-around;
  // font-weight: 700;
  color: black;
}

.selectable-span {
  cursor: text;
  /* 鼠标光标设置为文本光标 */
  user-select: text;
  /* 允许用户选中元素中的内容 */
}
</style>
